<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Socket.io Chat</title>
	<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script>
		$(document).ready(function() {
			var socket = io.connect();
			
			// event handlers
			socket.on('message', function(data) {
				// create string
				var output = '';
				output += '<div>';
				output += '<h3>' + data.name + '</h3>';
				output += '<p>' + data.message + '</p>';
				output += '<p>' + data.date + '</p>';
				output += '</div>';
				
				$('#content').prepend(output);
			});
			
			$('button').click(function() {
				socket.emit('message', {
					name: $('#name').val(),
					message: $('#message').val(),
					date: new Date().toUTCString()
				});
			});
		});
	</script>
</head>
<body>
	<h1>Socket.io Chat</h1>
	<p>Chat with Node.js</p>
	<hr/>
	<input id="name"/>
	<input id="message"/>
	<button>Button</button>
	<div id="content"></div>
</body>
</html>